<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性-事件</title>
    <style>

        .box {
            width: 200px;
            height: 200px;
            border: 1px solid;
        }

        .success {
            background-color: green;
        }

        .danger {
            background-color: red;
        }
    </style>
</head>
<body>

<button id="btn1">按钮1</button>

<div id="box1" class="box"></div>

<input id="username"></input>
<div id="message"></div>

</body>
<script>


    /**
     * 1. 概念
     *   dom-属性-事件
     *    event
     *       名称
     *       处理函数
     *       触发元素
     *
     *       绑定 ： （元素上的）事件 和 处理函数绑定的过程
     *
     *       行为/动作 --- 反应
     * */

    var btn1 = document.getElementById('btn1');

    var btn1Click = function () {
        alert('hello')
    }

    btn1.onclick = btn1Click;

    // btn1.onclick =function (){
    //
    // };

    /**
     *   2. 事件分类
     *      鼠标事件  click dbclick(不常用) mouseOver mouseOut
     *      键盘事件  keyup keydown keypress
     *      系统事件
     * */



    var box1 = document.getElementById('box1');

    box1.onmouseover = function () {

        // box1.innerText = 'over';
        this.innerText = 'over'; // this 指向触发这个事件的元素

        this.classList.remove('danger');
        this.classList.add('success');

    }

    box1.onmouseout = function () {
        this.innerText = 'out';
        this.classList.add('danger');
        this.classList.remove('success');
    }


    var username = document.getElementById('username');
    //    username.onkeyup = function (){
    //      // var message = document.getElementById('message');
    //      //
    //      //  message.innerText = this.value;
    //
    //       var ipt = this.value;
    //
    //       /**
    //        *  form 校验
    //        *     前台验证
    //        *     1. 长度
    //        *     2. 一致性
    //        *     3. 身份证
    //        *     4. 电话号码
    //        *     5. 邮箱
    //        *     后台验证
    //        *     6. 用户名重复
    //        * */
    //       if(ipt.length<8){
    //         message.innerText='输入内容不得少于8个字符！';
    //       }else{
    //         message.innerText='';
    //       }
    // }


    username.onkeyup = function () {
        var message = document.getElementById('message');
        message.innerText = this.value;
    }


</script>
</html>